<template>
  <view
    v-show="!isLoading"
    :style="{
      backgroundImage: `url(${getImageUrl('share-bg.png')})`
    }"
    class="container"
  >
    <u-navbar
      :background="navBackground"
      back-icon-color="#fff"
      title="邀请好友"
      title-color="#fff"
      title-size="36"
      :border-bottom="false"
    ></u-navbar>
    <image
      src="/static/users/text.png"
      style="width: 80%; margin-top: 150rpx"
      class="text-img"
      mode="widthFix"
    >
    </image>
    <view class="share-list">
      <view class="list-title">推广流程</view>
      <view class="share-item dis-flex">
        <view class="item">
          <view class="img-warpper">
            <image class="item-img" src="@/static/users/1.png" mode="widthFix"></image>
          </view>
          <text class="item-con">分享推广二维码 给新用户好友</text>
        </view>
        <view class="item">
          <view class="img-warpper">
            <image class="item-img" src="@/static/users/2.png" mode="widthFix"></image>
          </view>
          <text class="item-con">好友就与您绑定 推荐关系</text>
        </view>
        <view class="item">
          <view class="img-warpper">
            <image class="item-img" src="@/static/users/3.png" mode="widthFix"></image>
          </view>
          <text class="item-con">好友购买并收货 获得推广奖励</text>
        </view>
      </view>
    </view>
    <view class="dis-flex" style="width: 88%">
      <button class="share-bt dis-flex" style="justify-content: center" @click="changeqrcodeShow()">
        <view class="item-image">
          <text class="iconfont icon-weixin"></text>
        </view>
        <view class="item-name">
          <text>立即分享邀请</text>
        </view>
      </button>
    </view>
    <view class="team-list">
      <view class="dis-flex flex-y-between">
        <view class="my-title">本月业绩</view>
        <view class="wq dis-flex flex-y-center" @click="routTo('/users/share/log')">
          <text>往期业绩</text>
          <u-icon size="20" name="/static/enter.png"></u-icon>
        </view>
      </view>
      <share-monthly :user-count="userCount"></share-monthly>
    </view>
    <view
      v-show="!ruleShow"
      @click="changeRuleShow()"
      class="rule-bt"
      :style="{
        top: `${20 + statusBarHeight + navbarHeight}px`
      }"
      >规则说明
    </view>

    <view class="tishi-warpper">
      <u-popup
        class="teshu"
        v-model="qrcodeShow"
        border-radius="16"
        :mask-close-able="false"
        mode="center"
        width="600rpx"
        height="auto"
      >
        <view class="tishi-box">
          <view class="content">
            <view
              class="qrcode-box dis-flex flex-y-center"
              :style="{
                backgroundImage: `url(${getImageUrl('qr-bg.png')})`
              }"
            >
              <u-image :src="userInfo.qrcode" width="360rpx" height="360rpx"></u-image>
              <view class="ti">个人独立推广二维码</view>
            </view>
            <view class="user-info-1 dis-flex flex-y-center">
              <u-avatar :src="userInfo.avatar" size="80"></u-avatar>
              <view class="info dis-flex flex-y-between">
                <view>{{ userInfo.nickname }}</view>
                <view class="tel">{{ formatPhone(userInfo.mobile) }}</view>
              </view>
            </view>
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <view class="yaoqing" @click="shareQrcode">立即邀请好友</view>
          <!-- #endif -->
          <!-- <button class="yaoqing" open-type="share">立即邀请好友</button> -->
          <view class="ts-close">
            <u-icon size="28" name="close" color="#ffffff" @click="qrcodeShow = false"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>

    <view class="tishi-warpper">
      <u-popup
        class="teshu"
        v-model="upShow"
        border-radius="16"
        :mask-close-able="false"
        mode="center"
        width="600rpx"
        height="auto"
      >
        <view class="tishi-box">
          <view class="content">
            <view class="notioc">
              <view class="no-tl">开通权益提示</view>
              <view class="no-n">
                <view>你当前直推会员人数已满100人</view>
                <view>可开通合伙人分红权限享更多收益</view>
                <view> 赶快加入开通吧！</view>
              </view>
              <u-line></u-line>
              <view class="bt-group dis-flex">
                <view class="bt bt-1" @click="upShow = false">暂不考虑</view>
                <!-- <u-line length='100%' direction="col"></u-line> -->
                <view class="bt">立即开通</view>
              </view>
            </view>
          </view>
          <view class="ts-close">
            <u-icon size="28" name="close" color="#ffffff" @click="upShow = false"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>

    <u-popup v-model="ruleShow" border-radius="20" mode="center" width="600rpx" height="auto">
      <view class="pos-fixed rule-warpper">
        <view class="title">规则说明</view>
        <scroll-view scroll-y="true" style="min-height: 300rpx; max-height: 690rpx">
          <view class="content">
            <u-parse :html="ruleDetail" />
          </view>
        </scroll-view>
        <view class="colse-bt" @click="ruleShow = false">知道了</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import ShareMonthly from '@/users/components/share-monthly.vue'

let systemInfo = uni.getSystemInfoSync()
export default {
  components: {
    ShareMonthly
  },
  data() {
    return {
      navBackground: {
        backgroundColor: 'transparent'
      },
      qrcodeSize: 180,
      isLoading: false,
      showSubCate: false,
      qrcodeShow: false,
      upShow: false,
      ruleShow: false,
      assets: {},
      imgurl: '',
      isFirstload: false,
      // 是否已登录
      isLogin: false,
      userInfo: null,
      statusBarHeight: systemInfo.statusBarHeight,
      qrCode: '',
      ruleDetail: '',
      userCount: null
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo')
    this.$u.api.getUserInfo().then((res) => {
      this.userInfo = res.data
      uni.setStorageSync('userInfo', res.data)
    })
    this.$u.get('/app-api/cms/agreement/get-content', { identify: 'share_rule' }).then((res) => {
      this.ruleDetail = res.data
    })
    this.$u.get('/app-api/brokerage/user/get-summary-by-month', {}).then((res) => {
      this.userCount = res.data
    })
  },
  onShareAppMessage() {
    return {
      title: '邀请有礼',
      path: `/pages/index/index?inviteCode=` + this.userInfo?.no
    }
  },
  onShareTimeline() {
    return {
      title: '邀请有礼',
      path: `/pages/index/index?inviteCode=` + this.userInfo?.no
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  methods: {
    changeRuleShow() {
      this.ruleShow = !this.ruleShow
    },
    changeqrcodeShow() {
      this.qrcodeShow = !this.qrcodeShow
    },
    routTo(url) {
      uni.navigateTo({
        url
      })
    },
    shareQrcode() {
      let app = this
      let file = app.userInfo.qrcode
      wx.downloadFile({
        url: file,
        success: (res) => {
          console.log({
            success: res
          })
          wx.showShareImageMenu({
            path: res.tempFilePath,
            success: (re) => {
              console.log({
                success1: re
              })
            },
            fail: (re) => {
              console.log({
                fail1: re
              })
            }
          })
        },
        fail: (res) => {
          console.log({
            fail: res
          })
        }
      })
    },
    saveImg() {
      let that = this
      //获取授权列表，查看是否授权写入相册权限
      uni.getSetting({
        success(res) {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            uni.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                that.downloadImage()
              }
            })
          } else {
            that.downloadImage()
          }
        }
      })
    },
    downloadImage() {
      let that = this
      uni.downloadFile({
        url: that.imgurl,
        success: (res) => {
          if (res.statusCode === 200) {
            that.saveimgtoAlbum(res.tempFilePath)
          }
        }
      })
    },
    saveimgtoAlbum(imgurl) {
      //图片保存到本地
      let that = this
      uni.showLoading()
      uni.saveImageToPhotosAlbum({
        filePath: imgurl,
        success: function (data) {
          uni.hideLoading()
          uni.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000
          })
        },
        fail: function (err) {
          uni.hideLoading()
          if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
            uni.openSetting({
              success(settingdata) {
                if (settingdata.authSetting['scope.writePhotosAlbum']) {
                  uni.showToast({
                    title: '您已授权成功，请重新保存海报',
                    icon: 'success',
                    duration: 2000
                  })
                } else {
                  uni.showToast({
                    title: '尚未授权，无法保存海报',
                    icon: 'none',
                    duration: 2000
                  })
                }
              }
            })
          }
        },
        complete(res) {
          console.log(res)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-flow: column;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;

  .text-img {
    width: 80%;
    text-align: center;
  }

  .share-list {
    width: 90%;
    padding: 20rpx;
    background: #e8f0fc;
    border-radius: 30rpx;
    margin: 50rpx 0;
    height: 340rpx;
    display: flex;
    flex-flow: column;
    justify-content: space-around;

    .list-title {
      font-weight: 600;
      font-size: 30rpx;
      color: #333333;
    }

    .item-con {
      text-align: center;
      font-size: 24rpx;
      color: #333333;
    }

    .share-item {
      justify-content: space-between;

      .item {
        display: flex;
        flex-flow: column;
        align-items: center;
        padding: 20rpx;

        .img-warpper {
          width: 90rpx;
          height: 90rpx;
          background: #d7e3f5;
          border-radius: 50%;
          margin-bottom: 30rpx;

          .item-img {
            width: 90rpx;
            margin: auto;
          }
        }
      }
    }
  }

  .share-bt {
    width: 100%;
    height: 90rpx;
    background: linear-gradient(0deg, #cef4ef, #e7fffc, #cef4ef);
    border-radius: 40rpx;
    text-align: center;
    line-height: 90rpx;
    font-weight: 600;
    font-size: 34rpx;
    color: #10a28f;
  }

  .team-list {
    width: 90%;
    background: #e8f0fc;
    border-radius: 30rpx;
    margin: 50rpx;
    display: flex;
    flex-flow: column;
    padding: 50rpx 20rpx;

    .my-title {
      font-size: 34rpx;
      color: #333333;
      line-height: 32rpx;
    }

    .wq {
      font-size: 28rpx;
      color: #666666;
    }
  }
}

.mask {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 8;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease-in-out 0s;
}

.qrcode-warpper {
  display: flex;
  flex-flow: column;
  align-items: center;
  top: 15%;
  z-index: 10;
  height: auto;

  .qrcode-info {
    // background-image: url('/static/background/qrcode.png');
    background-position: center;
    background-size: cover;
    background-color: #fff;
    display: flex;
    flex-flow: column;
    align-items: center;
    padding: 50rpx 113rpx;
    width: 100%;

    .qrcode {
      width: 374rpx;
      height: 374rpx;
      margin-top: 25rpx;
    }

    .des {
      font-weight: 400;
      font-size: 36rpx;
      color: #333333;
      line-height: 48rpx;
      margin-top: 67rpx;
    }
  }

  .user-info {
    background: #ffffff;
    border-radius: 0 0 16rpx 16rpx;
    padding: 52rpx 20rpx;
    display: flex;
    align-items: center;
    width: 100%;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }

    .nickname {
      margin-left: 10rpx;
      display: flex;
      flex-flow: column;
      justify-content: space-between;

      .n {
        font-weight: 600;
        font-size: 28rpx;
        color: #333333;
        // line-height: 31rpx;
      }

      .p {
        font-weight: 500;
        font-size: 24rpx;
        color: #666666;
        // line-height: 50rpx;
      }
    }
  }

  .save-bt {
    // width: 600rpx;
    height: 80rpx;
    background: #ff7626;
    border-radius: 12rpx;
    margin: 40rpx 0;
    font-weight: 400;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 80rpx;
    text-align: center;
    width: 100%;
  }

  .colse-bt {
    width: 100%;
    text-align: center;

    .image {
      width: 64rpx;
      height: 64rpx;
    }
  }
}

.rule-warpper {
  background: white;
  padding: 30rpx;
  display: flex;
  flex-flow: column;
  align-items: center;
  height: auto;
  border-radius: 20rpx;

  .title {
    font-weight: 500;
    font-size: 34rpx;
    color: #333333;
    margin: 20rpx 0;
  }

  .content {
    margin: 30rpx 0 57rpx 0;
  }

  .colse-bt {
    width: 240rpx;
    height: 72rpx;
    background: #10a28f;
    border-radius: 36rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 72rpx;
    text-align: center;
  }
}

.rule-bt {
  position: fixed;
  right: 0;
  width: 140rpx;
  height: 60rpx;
  background: #000000;
  border-radius: 30rpx 0rpx 0rpx 30rpx;
  opacity: 0.6;
  font-weight: 400;
  font-size: 26rpx;
  color: #ffffff;
  line-height: 60rpx;
  text-align: center;
}

::v-deep.tishi-warpper .teshu .u-mode-center-box {
  background-color: transparent !important;
}

.tishi-box {
  position: relative;
  display: flex;
  flex-flow: column;

  .content {
    background-color: #fff;
    // border-radius: 20rpx;
    // padding: 30rpx 20rpx;
    border-radius: 16rpx;
  }

  .ts-close {
    margin: auto;
    margin-top: 60rpx;
    width: 64rpx;
    height: 64rpx;
    border: 4rpx solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.qrcode-box {
  width: 600rpx;
  height: 600rpx;
  justify-content: space-around;
  flex-flow: column;
  padding: 50rpx 0;
  background-position: center;
  background-size: cover;

  .ti {
    font-size: 36rpx;
    color: #333333;
  }
}

.user-info-1 {
  padding: 52rpx 20rpx;

  .info {
    margin-left: 10rpx;
    height: 80rpx;
    flex-flow: column;

    .tel {
      font-size: 24rpx;
      color: #666666;
    }
  }
}

.yaoqing {
  width: 600rpx;
  height: 80rpx;
  background: #10a28f;
  border-radius: 12rpx;
  font-size: 30rpx;
  color: #ffffff;
  line-height: 80rpx;
  text-align: center;
  margin-top: 40rpx;
}

.notioc {
  text-align: center;

  .no-tl {
    font-weight: 600;
    font-size: 34rpx;
    color: #333333;
    margin-top: 50rpx;
  }

  .no-n {
    margin-top: 30rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 55rpx;
    margin-bottom: 30rpx;
  }

  .bt-group {
    .bt {
      flex: 1;
      font-size: 32rpx;
      color: #10a28f;
      padding: 42rpx 0;
      border-right: 1rpx solid #e4e7ed;
    }

    .bt-1 {
      color: #666666;
    }

    .bt:last-child {
      border: none;
    }
  }
}
</style>
